<template>
    <div class="Cash">
        <!--       公共顶部-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">余额提现</p>
        </Top>
        <!--表单-->
        <ul class="form" v-loading="loading">
            <!--到账账户-->
            <li class="clearfix account animated fadeInDown" style="animationDelay:0.1s">
                <span class="title">到账账户</span>
                <input
                       @click="maskShow=true"
                       type="text" 
                       class="text" 
                       placeholder="选择到账账户/添加账户" 
                       v-model="account" readonly />
                <i class="el-icon-arrow-right arrow" @click="maskShow=true"></i>
            </li>
            <li class="inputBox animated fadeInDown" style="animationDelay:0.2s">
                <h3>提现金额</h3>
                <div class="number clearfix">
                    <b>￥</b>
                    <input type="number" v-model="cash_amount" />
                </div>
                <p class="can">可提现余额{{member_amount}}元</p>
            </li>
            <!--确认提现-->
            <li class="confirmBn animated fadeInDown" style="animationDelay:0.3s">
                <el-button type="primary" :loading="confirmState" @click="testPaypwd">提现</el-button>
            </li>
        </ul>
        <!--选择银行卡弹窗-->
        <transition name="bounce-up">
            <div class="mask mask2" v-if="maskShow" v-loading="loading">
                <!--       公共顶部-->
                <Top>
                    <i class="el-icon-arrow-left back" slot="leftPart" @click="maskShow=false"></i>
                    <p class="title" slot="midPart">选择银行卡</p>
                </Top>
                <!--列表-->
                <ul class="cardWindow" v-if="list.length>0">
                    <li class="clearfix animated flipInX"
                        :style="{animationDelay:delay(index,true)}"
                        v-for="(item,index) in list"
                        :key="index"
                        @click="chooseCard(item,index)">
                        <img :src="item.logo" alt="">
                        <div class="info">
                            <p>{{item.bank_name}}</p>
                            <p>尾号{{item.bank_no}} 储蓄卡</p>
                        </div>
                        <i class="el-icon-check check animated bounceIn" v-if="index===checkIndex"></i>
                    </li>
                </ul>
                <!--无数据-->
                <div class="nodata animated fadeIn" v-else>
                    <!--<svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wushuju"></use>
                    </svg>-->
                    <img src="../../assets/huawa-off.png" alt="" />
                    <p>您还没有添加银行卡哦！</p>
                </div>
                <!--按钮-->
                <div class="addBtn">
                    <el-button 
                               @click="$router.push('/bag/addcard')"
                               type="primary" 
                               icon="el-icon-plus">添加银行卡</el-button>
                </div>
            </div>
        </transition>
        <!--支付密码弹窗-->
        <transition name="bounce-up">
            <div class="mask" v-if="payMask">
                <!--支付-->
                <div class="mask-content" >
                    <h3 class="payH3">请输入支付密码 <span class="close" @click="payMask=false">×</span></h3>
                    <!--输入支付密码-->
                    <div class="pwdInp" v-if="hasPwd===1">
                        <input type="password" placeholder="请输入支付密码" v-model="pay_passwod" />
                        <router-link 
                                     tag="div" 
                                     style="text-align:right;margin-top:.2rem;"
                                     to="/setPaypwd">忘记密码？</router-link>
                        <div style="text-align:center"><el-button class="buyBtn" type="primary" :loading="confirmState" @click="cashNow">立即提现</el-button></div>
                    </div>
                    <!--设置支付密码-->
                    <p style="text-align:center;margin-top:1rem;" v-if="hasPwd===0">您还没有设置支付密码，<router-link tag="span" style="color:#00a9cd;" to="/setPaypwd">立即设置 ></router-link></p>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    export default {
        name: 'Cash',
        components: {
            Top,//顶部信息组件
        },
        data () {
            return {
                loading:false,//加载动画
                account:'',//账户
                member_amount:0,//可提现余额
                list:[],//列表
                checkIndex:-1,//默认选中
                /*表单*/
                cash_amount:'',//提现金额
                bank_id:'',//银行编码
                pay_passwod:'',//支付密码

                /*按钮*/
                confirmState:false,//是否可点击
                hasPwd:0,//0:无支付密码 1:有支付密码
                payMask:false,//支付遮罩

                /*银行卡弹窗*/
                maskShow:false,//显示状态
            }
        },
        created(){
            this.Posthttp('/?method=flower.user.getBank',{member_id:this.getMemberId()},(res)=>{

                if(JSON.parse(res.bodyText).status ===1){
                    this.member_amount = JSON.parse(res.bodyText).data.member_amount || 0;
                    this.list = JSON.parse(res.bodyText).data.bank || [];
                }else{
                    this.$message.warning(JSON.parse(res.bodyText).msg); 
                }
            });
        },
        methods:{
            //选择银行卡
            chooseCard(item,index){
                this.checkIndex = index;
                this.account = item.bank_name;
                this.bank_id = item.bank_id;
                this.maskShow = false;
            },
            //检测是否有设支付密码 
            testPaypwd(){
                if(!this.cash_amount || !this.bank_id){
                    this.$message.warning('请输完善表单~~'); 
                    return;
                }
                this.confirmState = true;//按钮可否点击
                this.Posthttp('/?method=flower.user.checkPayPassword',{member_id:this.getMemberId()},(res)=>{
                    this.confirmState = false;
                    this.payMask=true;//支付板块调起
                    this.hasPwd = JSON.parse(res.bodyText).status;//0:无支付密码 1:有支付密码
                });
            },
            //确认提现
            cashNow(){
                this.confirmState = true;
                //ajax
                this.Posthttp('/?method=flower.user.addCash',{member_id:this.getMemberId(),cash_amount:this.cash_amount,bank_id:this.bank_id,pay_passwod:this.pay_passwod},(res)=>{
                    this.confirmState = false;
                    /*登录是否成功*/
                    if(JSON.parse(res.bodyText).status ===1){
                        this.$message.success('提现成功啦~~'); 
                        this.$router.push('/bag/money');
                    }else{
                        this.$message.warning(JSON.parse(res.bodyText).msg); 
                    }
                });
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Cash{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: .8rem;
        overflow-y: auto;
        background-color: #f2f2f2;
        /*信息列表*/
        .form{
            li{
                background-color: #fff;
            }
            /*银行卡选择*/
            li.account{
                padding: .3rem .2rem;
                position: relative;
                color: #222;
                line-height: .3rem;
                border-bottom: 1px solid #e4e4e4;
                &:last-child{
                    border-bottom: 0;
                }
                .title{
                    float: left;
                    width: 22%;
                    font-size: .28rem;
                    font-weight: 600;
                }
                .text{
                    width: 70%;
                    float: left;
                    text-align: right;
                    font-size: .26rem;
                    outline: none;
                    border: 0;
                }
                .arrow{
                    width: 8%;
                    text-align: right;
                    font-size: .36rem;
                    position: absolute;
                    right: .2rem;
                    top: calc(50% - .18rem);
                    color: #999;
                }
            }
            /*金额输入框*/
            li.inputBox{
                padding: .3rem 0;
                h3{
                    font-size: .28rem;
                    color: #222;
                    font-weight: 600;
                    padding: 0 .2rem;
                }
                .number{
                    margin-top: .6rem;
                    b{
                        font-weight: 600;
                        font-size: .42rem;
                        color: #222;
                        width: 12%;
                        float: left;
                        line-height: .8rem;
                        padding-left: .2rem;
                        text-align: left;
                    }
                    input{
                        float: left;
                        width: 88%;
                        height: .8rem;
                        border: 0;
                        border-bottom: 1px solid #e4e4e4;
                        outline: none;
                        color: #222;
                        font-size: .48rem;
                    }
                }
                p.can{
                    margin-top: .24rem;
                    color: #999;
                    padding:  0 .2rem;
                }
            }
            /*确认提现*/
            li.confirmBn{
                width: 100%;
                text-align: center;
                padding: 0 .2rem;
                background-color: transparent;
                margin-top: 1.24rem;
                button{
                    width: 100%;
                    height: .8rem;
                    font-size: .28rem;
                    letter-spacing: 1px;
                    background: #de6940;
                }
            }
        }
        /*弹窗*/
        .mask2{
            background-color: #f5f5f5;
        }
        /**/
        .cardWindow{
            width: 100%;
            position: fixed;
            top: .8rem;
            bottom: 1.1rem;
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: .4rem;
            li{
                border-bottom: 1px solid #e4e4e4;
                position: relative;
                padding: .26rem .2rem;
                background-color: #fff;
                &:last-child{
                    border-bottom: 0;
                }
                img{
                    width: .66rem;
                    height: .66rem;
                    float: left;
                }
                .info{
                    margin-left: .66rem;
                    padding-left: .2rem;
                    p{
                        color: #222;
                        height: .33rem;
                        line-height: .33rem;
                    }  
                }
                .check{
                    color: #07a770;
                    font-size: .4rem;
                    position: absolute;
                    right: .2rem;
                    top: 50%;
                    top: calc(50% - .2rem);
                }
            }
        }
        /*按钮*/
        .addBtn{
            width: 100%;
            position: fixed;
            bottom: 0;
            padding: 0 .2rem .3rem;
            button{
                width: 100%;
                height: .8rem;
                font-size: .28rem;
                letter-spacing: 1px;
                background: #de6940;
            }
        }
        /**/
        .mask-content{
            width: 90%;
            min-height: 4rem;
            position: absolute;
            left: 0;
            right: 0;
            top: 30%;
            margin: auto;
            padding: 0 0 .3rem;
            background-color: #fff;
            border-radius: .1rem;
            animation-duration: .4s;
            h3{
                text-align: center;
                line-height: 1rem;
                border-bottom: 1px solid rgba(226, 85, 35,.4);
                margin-bottom: .4rem;
                font-size: .28rem;
                color: #333;
                font-weight: 600;
            }
            .payH3{
                border-bottom: 1px solid #e4e4e4;
            }
            .close{
                position: absolute;
                right: .2rem;
                top: -.08rem;
                font-size: .4rem;
            }
            p{
                padding: 0 .2rem;
                margin-bottom: .3rem;
                color: #777;
                font-size: .26rem;
            }
            .buyBtn{
                width: 3rem;
                font-size: .28rem;
                margin-top: .6rem;
            }
            /*支付密码*/
            .pwdInp{
                width: 100%;
                padding: 0 .2rem;
                input{
                    width: 100%;
                    border: 1px solid #e4e4e4;
                    height: .8rem;
                    padding-left: .3rem;
                    outline: none;
                }
            }
        }
    }
</style>
